<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <div class="header">
          <el-form ref="form" :rules="rules" :model="form" label-width="80px" class="flex">
            <el-form-item label="网点名称" prop="networkNameId">
              <el-select v-model="form.networkNameId" placeholder="请选择网点名称" style="width: 286px">
                <el-option v-for="item in jsnetdata" :key="item.id" :label="item.networkName" :value="item.networkName" />
              </el-select>
            </el-form-item>
            <el-form-item label="账号类型">
              <el-select v-model="form.settleTypeId" placeholder="请选择账号类型" style="width: 240px">
                <el-option label="承包区" value="承包区" />
                <el-option label="业务员" value="业务员" />
              </el-select>
            </el-form-item>
            <el-form-item label="账号名称">
              <el-input v-model="form.settleObjectNameId" placeholder="请输入内容" />

            </el-form-item>
            <el-form-item label="时间范围" prop="value1">
              <el-date-picker v-model="form.value1" value-format="yyyy-MM-dd" class="input1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="picker" />
            </el-form-item>
            <el-form-item style="width: 300px">
              <el-button class="cx" @click="cx">查询</el-button>
              <elbutton :obj="form" @dj="reast" />
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="14">
        <div class="left">
          <div class="l-top">
            <span>承包区在各目的省份收入总和排名</span>
            <el-select v-model="cbqzgsfpmindex" placeholder="请选择" @change="pm1">
              <el-option label="收入从高到低进行" :value="1" />
              <el-option label="收入从低到高进行" :value="2" />
            </el-select>
          </div>
          <div id="mychart" ref="mychart" style="padding-top: 20px" class="echart" :style="{ float: 'left', width: '100%', height: '620px' }" />
        </div>
      </el-col>
      <el-col :span="10">
        <div class="right">
          <div class="l-top">
            <span>目的省份收入总和排名</span>
            <el-select v-model="mdsfpmindex" placeholder="请选择" @change="pm2">
              <el-option label="收入从低到高进行" :value="1" />
              <el-option label="收入从高到低进行" :value="2" />
            </el-select>
          </div>
          <el-table class="my-tablee" :data="pmtablelist" style="width: 100%" border tooltip-effect="dark" :cell-style="{textAlign: 'center'}" :header-cell-style="{ textAlign: 'center',backgroundColor: '#F5F5F5',color: '#333333' }">
            <el-table-column prop="province" label="路线" />
            <el-table-column prop="income" label="本期收入(元)" />
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="明细" name="first">
        <el-row type="flex" justify="space-between">
          <el-col :span="24">
            <div>当前表格{{ tableData.length }}项</div>
          </el-col>
          <el-col :span="5">
            <div class="flex-end">
              <el-button type="primary">新增</el-button>
              <el-button type="primary">删除</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <elltable ref="multipleTable" :loading="loading" :data="tableData" :th="mxth" :n="5" />
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: flex-end">
          <pagination :current-page="form.pageDate.pageNum" :page-size="form.pageDate.pageSize" :total="mxtotal" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="汇总" name="second">
        <el-row type="flex" justify="space-between">
          <el-col :span="15">
            <div class="page">当前表格<span>{{ cfhztabledata.length }}</span>项</div>
          </el-col>
          <el-col :span="4">
            <div class="flex-end">
              <el-button type="primary">导出</el-button>
              <el-button type="primary">数据说明</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <elltable ref="multipleTable" :loading="loading" :data="cfhztabledata" :th="hzth" />
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: flex-end">
          <pagination :current-page="form.pageDate.pageNum" :page-size="form.pageDate.pageSize" :total="hztotal" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getOutletsList } from '@/api/dashboard'
import { cylxhzApi, cbqzgsfpmApi, mdsfpmApi, cylxmxApi } from '@/api/structure'
export default {
  data() {
    return {
      rules: {
        value1: [
          { required: true, message: '请选择时间范围', trigger: 'change' }
        ],
        networkNameId: [
          { required: true, message: '请选择结算网点', trigger: 'change' }
        ]
      },
      activeName: 'first',
      // 时间开始与结束
      value1: [],
      //   结算网点数据
      jsnetdata: [],
      //   存放的是汇总表格的数据
      cfhztabledata: [],
      //   汇总total
      hztotal: 0,
      //   承包区在各目的省份收入总和排名索引

      cbqzgsfpmindex: 1,
      // 目的省份收入总和排名索引
      mdsfpmindex: 1,
      currentPage4: 0,
      // 汇总
      form: {
        endTime: '',
        networkNameId: '辽宁盘锦公司',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        },
        settleObjectNameId: '',
        settleTypeId: '承包区',
        startTime: ''
      },
      // 图标排名展示数据名字
      optionsname: [],
      // 图标排名展示数据数量
      optionsdata: [],

      // 表格排名展示数据
      pmtablelist: [],
      value: '',
      //   明细的数据
      tableData: [],
      //   明细总长度
      mxtotal: 0,
      mxth: [],
      hzth: [],
      loading: false
    }
  },
  mounted() { },
  async created() {
    // 获取结算网点名称
    this.getjsnetname()
    // 获取汇总表格内容
    // this.gethztable()
    // // 目的省份收入总和排名
    // this.getmdsfpm()
    // // 获取承包区在各目的省份收入总和排名
    // this.getcbqzgsgpm()
  },
  methods: {
    // 重置
    reast(aaa) {
      this.form = aaa
    },
    // 获取汇总表格内容
    async gethztable() {
      this.loading = true
      const res = await cylxhzApi(this.form)
      console.log('汇总', res)
      const res1 = await cylxmxApi(this.form)
      console.log('明细', res1)
      this.loading = false
      if (res.code === 500) {
        this.cfhztabledata = []
        this.tableData = []
        this.hztotal = 0
        this.mxtotal = 0
        this.hzth = []
        this.mxth = []

        return
      }
      this.tableData = res1.data.list.data
      this.cfhztabledata = res.data.list.data
      this.hztotal = res.data.list.total
      this.mxtotal = res1.data.list.total
      this.hzth = res.data.fields
      this.mxth = res1.data.fields
    },
    // 获取结算网点名称
    async getjsnetname() {
      const res = await getOutletsList()
      // console.log("网点名称", res);
      this.jsnetdata = res.data
    },
    // 获取承包区在各目的省份收入总和排名
    async getcbqzgsgpm() {
      const data = {
        // 1升序2降序
        ascOrDesc: this.cbqzgsfpmindex,
        endTime: this.form.endTime,
        networkNameId: this.form.networkNameId,
        settleObjectNameId: this.form.settleObjectNameId,
        settleTypeId: this.form.settleTypeId,
        startTime: this.form.startTime
      }

      const res = await cbqzgsfpmApi(data)
      // console.log("承包区在各目的省份收入总和排名", res);
      this.optionsname = res.data.networkName
      this.optionsdata = res.data.income
      this.initEcharts()
    },
    // 目的省份收入总和排名
    async getmdsfpm() {
      const data = {
        // 1升序2降序
        ascOrDesc: this.mdsfpmindex,
        endTime: this.form.endTime,
        networkNameId: this.form.networkNameId,
        settleObjectNameId: this.form.settleObjectNameId,
        settleTypeId: this.form.settleTypeId,
        startTime: this.form.startTime
      }

      const res = await mdsfpmApi(data)
      // console.log("目的省份收入总和排名", res);
      this.pmtablelist = res.data
    },
    // 改变排名时触发
    pm1(value) {
      this.cbqzgsfpmindex = value
      this.getcbqzgsgpm()
    },
    pm2(value) {
      this.mdsfpmindex = value
      this.getmdsfpm()
    },
    // 获取开始结束日期
    picker(vlaue) {
      this.form.startTime = vlaue[0]
      this.form.endTime = vlaue[1]
    },
    // 查询按钮
    cx() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.gethztable()
          // 目的省份收入总和排名
          this.getmdsfpm()
          // 获取承包区在各目的省份收入总和排名
          this.getcbqzgsgpm()
        } else { return false }
      })
    },
    handleClick(e) {
      this.form.pageDate.pageNum = 1
      this.form.pageDate.pageSize = 10

      // console.log(e);
      this.gethztable()
    },
    handleSizeChange(val) {
      console.log('?', val)
      this.form.pageDate.pageSize = val
      this.gethztable()
    },
    handleCurrentChange(val) {
      console.log(val)
      this.form.pageDate.pageNum = val

      this.gethztable()
    },
    // 柱状图
    initEcharts() {
      const option = {
        aria: {
          decal: {
            enabled: true,
            decal: {
              show: true
            }
          }
        },
        legend: {
          left: 'right',
          data: ['收入', '做量']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },

        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },

        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel: {
            color: 'black'
          }
        },
        yAxis: {
          type: 'category',
          data: this.optionsname,
          axisLabel: {
            color: 'black'
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: '收入',
            type: 'bar',
            data: this.optionsdata,
            barWidth: 10,
            itemStyle: {
              color: '#2087D0',
              barBorderRadius: [10, 10, 10, 10]
            }
          }
        ]
      }
      const myChart = echarts.init(this.$refs.mychart) // 图标初始化
      myChart.setOption(option) // 渲染页面
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  padding: 20px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.left {
  height: 600px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  flex-flow: column;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.l-top {
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  span {
    margin-left: 20px;
  }

  div {
    margin-right: 20px;
  }
}

.right {
  height: 600px;
  display: flex;
  justify-content: center;
  flex-flow: column;
  border: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.my-tablee .has-gutter tr th {
  background-color: #f6f6f6 !important;
}
.cx{
  width: 80px;
  height: 42px;
  background: #2087d0;
  border-radius: 21px;
  color: #fff;
}
.page >span{
  color: #2087d0;
}
.bg-purple-dark {
  background: #99a9bf;
}
</style>
